<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      width: 100vw;
      height: 100vh;
    }

    .Box {
      width: 100vw;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    #canvasEle {
      box-shadow: 1px 1px 12px 5px #999, -1px -1px 12px 5px #999;
      background: linear-gradient(to bottom right, blue, red, yellow, green);
    }
  </style>
</head>

<body>
  <div class="Box">
    <canvas id="canvasEle"></canvas>
    <audio style="margin-top: 20px;" id="aduioEle" src="static/01.mp3" controls></audio>
    <button id="btn" onclick="fullScreenHandler()"
      style="padding: 1px 10px; letter-spacing: 5px; outline: none; margin-top: 5px;">全屏</button>
    <!-- <button onclick="test()">ddd</button> -->
  </div>
  <script src="./js/index.js"></script>
  <script>
    const body = document.body
    let isFull = false
    document.addEventListener('fullscreenchange', (e) => {
      isFull = !isFull
      if (!isFull) {
        canvas.width = 1500
        canvas.height = 550
      }
    })
    window.onload = () => {
      audioEle.src = `static/0${Getrandom_0toparams(4)}.mp3`
    }
    window.onresize = () => {
      canvas.width = body.clientWidth
      canvas.height = body.clientHeight
      // audioEle.style.display = 'none'
      // document.getElementById('btn').style.display = 'none'
    }
    function fullScreenHandler () {
      body.requestFullscreen()
    }
  </script>
</body>

</html>